<template>
	<uni-loading v-if="loading"></uni-loading>
	
	<view class="body" v-else>
		<view>
			<uni-list >
				<uni-list-item :border="false" title="生产任务单编号"  :rightText="taskBillNo"/>
			</uni-list>
		</view>
		<!--  顶部  -->
		<!-- <top-tab :options="stockList" :locationName="locationName" @stockChange="stockChange"
			@handleBarnChoose="handleBarnChoose"></top-tab> -->
		<!--  列表  -->
		<template v-if="purchaseList && purchaseList.length > 0">
			<uni-swipe-action>
				<uni-swipe-action-item :left-options="options" v-for="(item, index) in purchaseList"
					@click="handleDelete(index)">
					<view class="panel">
						<view class="panel_title">
							<view class="panel_title_left">{{ item.materialName }}</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">物料编码：</view>
									<view class="panel_content_row_item_value">{{ item.materialNo }}</view>
								</view>
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">规格：</view>
									<view class="panel_content_row_item_value">{{ item.materialModel }}</view>
								</view>
							</view>
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">单位：</view>
									<view class="panel_content_row_item_value">{{ item.unitName }}</view>
								</view>
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">总重：</view>
									<view class="panel_content_row_item_value">
										<view class="panel_content_row_item_value_input">
											<input type="text" v-model="item.count" placeholder="请输入总重"
												placeholder-class="input-placeholder" />
										</view>
									</view>
								</view>
							</view>
							<view class="panel_content_row">
								<view class="panel_content_row_item w-full">
									<view class="panel_content_row_item_title">批次：</view>
									<view class="panel_content_row_item_value padding-r">
										<view class="panel_content_row_item_value_input flex-1">
											<input type="text" v-model="item.batchNo" placeholder="请输入批次"
												placeholder-class="input-placeholder" />
										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</template>
		<uni-empty-info v-else label="暂无物料信息"></uni-empty-info>

		<!--  底部按钮  -->
		<view class="footerPanel">
			<view class="footerPanel_body">
				<button @click="handleChoose" class="footerBtn reset"><i class="iconfont icon-duihao btn_icon"></i>选择
				</button>
				<button @click="handleWarehousing" class="footerBtn scan"><i
						class="iconfont icon-duihao btn_icon"></i>确认
				</button>
			</view>
		</view>

		<!--  操作面板  -->
		<min-action-sheet ref="as"></min-action-sheet>

		<!-- 级联选择 -->
		<CascadePicker class="picker-view" ref="pickerView" popupTitle="选择物料信息" :map="{text:'materialName',value:'id'}"
			@change="onchange" @datachange="ondatachange" @nodeclick="onnodeclick" @search="handleSearch"
			@scrolltolower="handleScrolltolower" @refresherrefresh="onRefresh" :triggered="triggered"
			:loading="pickerLoading" searchPlaceholder="请输入物料编码或名称" :bottomLoading="pickerPageConfig.pageLoading"
			:end="pickerPageConfig.pageEnd" :multi-select="true" showNameOnly>
		</CascadePicker>

		<!-- 弹出层 -->
		<MaterialPopup ref="scaningPopup" title="物料入库" type="taskInStork" @success="initData"></MaterialPopup>
		<BarnPopup ref="barnPopup" @confirm="onLocationChange"></BarnPopup>
	</view>
</template>
<script>
	import topTab from "@/components/top-tab/top-tab"
	import minActionSheet from '@/components/min-action-sheet/min-action-sheet'
	import uniLoading from "../../vBase/components/uni-loading/uni-loading"
	import uniEmptyInfo from "../../vBase/components/uni-empty-info/uni-empty-info"
	import MaterialPopup from "@/components/popup/materialPopup"
	import BarnPopup from "@/components/popup/barnPopup"
	import CascadePicker from '../../components/cascade-picker/cascade-picker-view.vue'
	import CascadePickerJs from '../../components/cascade-picker/cascade-picker.js'

	export default {
		components: {
			topTab,
			minActionSheet,
			uniLoading,
			uniEmptyInfo,
			MaterialPopup,
			BarnPopup,
			CascadePicker,
		},
		mixins: [CascadePickerJs],
		data() {
			return {
				loading: false,
				purchaseList: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FF4E74'
					}
				}],
				scaningShow: false,
				scanNo: null,
				isFouce: false,
				stockList: [],
				stockNo: '',
				locationNo: '',
				locationName: '',
				materialBomBillNo: '',
				taskBillNo: '',
				produceHouse: '',
				pickerLoading: true,
				pickerPageConfig: {
					pageIndex: 0,
					pageSize: 20,
					pageEnd: false,
					pageLoading: true
				},
				keyword: null,
				triggered: false,
				dataTree: []
			}
		},
		async onLoad(e) {
			if (e.taskBillNo) this.taskBillNo = e.taskBillNo
		},
		onUnload() {
			uni.$off('deleteItem');
		},
		mounted() {
			let self = this
			uni.$on('deleteItem', ({
				material,
				success
			}) => {
				uni.showModal({
					title: '提示',
					content: '确认删除吗？',
					success(res) {
						if (res.confirm) {
							const {
								id,
							} = material;
							self.$api.deleteUserDesaltingInStockMaterialBox({
								id
							}, {
								loading: true
							}).then((res) => {
								if (!res.res) return;
								self.initData();
								success && success();
							});
						}
					}
				})
			})
		},
		methods: {
			/** 查询仓库*/
			// async getStockList() {
			// 	this.loading = true;
			// 	try {
			// 		let {
			// 			res,
			// 			stockList = []
			// 		} = await this.$api.getCustomerStock();
			// 		if (!res) return;
			// 		this.stockList = stockList;
			// 		if (stockList.length) this.stockNo = stockList[0].stockNo;
			// 	} finally {
			// 		this.loading = false;
			// 	}
			// },
			/** 初始化数据 */
			initData() {
				if (!this.stockNo) return;
				this.pageConfig = {
					pageIndex: 0,
					pageSize: 20,
					bottomEnd: false,
					bottomLoading: true
				}
				// this.getPurchaseList()
			},

			/**
			 * 查看详情
			 */
			async openDetail(material) {
				const {
					id,
					stockNo,
					batchNo,
					materialName,
					materialNo
				} = material
				let {
					res,
					data = []
				} = await this.$api.getUserDesaltingInStockMaterialBox({
					detailId: id
				}, {
					loading: true
				});
				let dataList = data.map(item => {
					return {
						id: item.id,
						materialName,
						materialNo,
						stockNo,
						batchNo,
						boxNo: item.boxNo,
						count: item.count,
						unit: item.unit,
					}
				})
				this.openPopNVue('入库明细', dataList)
			},

			/**
			 * 选择
			 */
			async handleChoose() {
				try {
					let param = this.keyword ? {
						key: this.keyword
					} : {}
					param = Object.assign(param, {
						pageIndex: this.pickerPageConfig.pageIndex,
						pageSize: this.pickerPageConfig.pageSize,
					})
					const res = await this.$api.saveGetMaterialByKey(param)
					if (!res.res) return
					if (this.pickerPageConfig.pageIndex === 0) this.dataTree = []
					if (res.data.length < 20) this.pickerPageConfig.pageEnd = true
					this.dataTree = this.dataTree.concat(res.data ?? [])
					if (this.keyword && !this.dataTree.length) {
						uni.showToast({
							title: "未查到该物料信息",
							icon: "none"
						})
					}
					let tree = JSON.parse(JSON.stringify(this.dataTree))
					this.$refs.pickerView.updateData({
						treeData: tree,
						selected: [],
						selectedIndex: 0,
						isMaterial: true
					})
				} finally {
					this.pickerLoading = false
					this.triggered = false
					this.pickerPageConfig.pageLoading = false
					this.$forceUpdate()
				}
			},

			/** 获取数据 */
			// async getPurchaseList() {
			// 	let {
			// 		res,
			// 		data = []
			// 	} = await this.$api.getUserDesaltingInStockMaterial({
			// 		stockNo: this.stockNo
			// 	});
			// 	if (!res) return;
			// 	this.purchaseList = data;
			// 	this.loading = false;
			// 	this.pageConfig.bottomEnd = true;
			// 	this.pageConfig.bottomLoading = false;
			// 	uni.stopPullDownRefresh();
			// },

			/** 选择仓位*/
			onLocationChange(location) {
				this.locationNo = location.locationNo;
				this.locationName = location.locationName;
			},

			/** 立即入库 */
			handleWarehousing() {
				const {
					locationNo,
					purchaseList
				} = this;
				if (!purchaseList || !purchaseList.length) {
					uni.showToast({
						title: '请添加物料',
						icon: 'none'
					});
					return;
				}
				if (purchaseList.some(v => !v.batchNo || !v.count || v.count === "0")) {
					uni.showToast({
						title: '请完善物料信息',
						icon: 'none'
					});
					return;
				}
				const self = this
				uni.showModal({
					title: '提示',
					content: '是否创建生产变品退料？',
					success(res) {
						if (res.confirm) {
							self.$api.createDesaltingInStockBill({
								taskBillNo: self.taskBillNo,
								boxList: self.purchaseList
							}).then(res => {
								if (res.res) {
									uni.showToast({
										title: '创建成功',
										icon: 'none'
									})
									self.purchaseList = []
								}
							})
						}
					}
				})
			},

			/**
			 * 选择仓库
			 * @param e
			 */
			stockChange(e) {
				this.stockNo = this.stockList[e].stockNo
				this.initData()
			},

			/**
			 * 选择仓位
			 * @param e
			 */
			stockLocation(e) {
				this.locationNo = e.locationNo
				this.locationName = e.locationName
			},

			/**
			 * 选择
			 */
			handleBarnChoose() {
				this.$refs.barnPopup.open(this.stockNo);
			},

			/**
			 * 删除物料
			 * @param {Object} e
			 */
			handleDelete(i) {
				this.purchaseList.splice(i, 1)
			},

			// /**
			//  * 下拉刷新数据
			//  */
			// onPullDownRefresh() {
			// 	this.initData()
			// },

			/** 上滑加载 */
			// onReachBottom() {
			// 	if (!this.pageConfig.bottomEnd) {
			// 		this.pageConfig.pageIndex++
			// 		this.pageConfig.bottomLoading = true
			// 		this.getPurchaseList();
			// 	}
			// },

			/**
			 * 加到退料表
			 * @param {Object} e
			 */
			async onchange(e) {
				// this.boxList = JSON.parse(JSON.stringify(e))

				// 中间处理
				this.purchaseList = this.purchaseList.concat(JSON.parse(JSON.stringify(e)))
			},

			/**
			 * 点击搜索按钮
			 * @param {Object} e
			 */
			handleSearch(e) {
				if (/^\d+$/.test(e) && e.length < 5) {
					uni.showToast({
						title: "请输入大于5位的物料编码",
						icon: "none"
					})
					return
				}
				this.pickerPageConfig.pageEnd = false
				this.keyword = e
				this.pickerPageConfig = {
					pageIndex: 0,
					pageSize: 20,
					pageEnd: false,
					pageLoading: true
				}
				this.handleChoose()
			},
			/**
			 * 滑动到底部
			 */
			handleScrolltolower() {
				if (this.pickerPageConfig.pageEnd || this.pickerPageConfig.pageLoading) return
				this.pickerPageConfig.pageLoading = true
				this.pickerPageConfig.pageIndex++
				this.handleChoose()
			},
			/**
			 * 下拉
			 */
			onRefresh() {
				this.pickerPageConfig = {
					pageIndex: 0,
					pageSize: 20,
					pageEnd: false,
					pageLoading: true
				}
				this.triggered = true
				this.handleChoose()
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import "../../static/css/common";
	
</style>
